<template>
  <div class="app-container">
    <el-input
    @keyup.enter.native="seach"
    class="seach"
    placeholder="请输入内容"
    v-model="seachdata">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
    <el-button
          class="addbutton"
          type="primary"
          @click="add">添加</el-button>
    <el-table :data="order_list" v-loading.body="listLoading" element-loading-text="Loading" :default-sort = "{prop: 'date', order: 'ascending'}" border fit highlight-current-row>

      <el-table-column label="登录名" width="239" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="昵称" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.nickname}}
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="155" align="center">
        <template slot-scope="scope">
          {{scope.row.phone}}
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" width="240" align="center">
        <template slot-scope="scope">
          {{scope.row.ID_No}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="注册时间" width="315" sortable>
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.meta.createAt | formatDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="职位" width="100" align="center">
        <template slot-scope="scope">
        {{ scope.row.position}}
        </template>
      </el-table-column>
      <el-table-column label="该账号权限等级" width="210" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.roles[0] | statusFilter">{{scope.row.roles[0]|userstatus}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="所属公司" align="center">
        <template slot-scope="scope">
          {{scope.row.company}}
        </template>
      </el-table-column>
      
      <el-table-column label="操作" align="center" width="190">
        <template slot-scope="scope">
          <el-button
          size="mini"
          type="primary"
          @click="edit_air(scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="fail_order(scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>

  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close='closeDialog'>
    <el-form :model="form" status-icon :rules="rules" ref="form">
      <el-form-item label="登录名：" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="请填写"></el-input>
      </el-form-item>
      <el-form-item label="密码：" :label-width="formLabelWidth" prop="password">
        <el-input v-model="form.password" autocomplete="off" placeholder="请填写"></el-input>
      </el-form-item>
      <el-form-item label="昵称：" :label-width="formLabelWidth" prop="nickname">
        <el-input v-model="form.nickname" autocomplete="off" placeholder="员工内称呼，可自定义"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="form.phone" autocomplete="off" placeholder="请填写该工作人员的手机号"></el-input>
      </el-form-item>
      <el-form-item label="职位：" :label-width="formLabelWidth" prop="position">
        <el-input v-model="form.position" autocomplete="off" placeholder="填写该工作人员的职位信息"></el-input>
      </el-form-item>
      <el-form-item label="所属公司：" :label-width="formLabelWidth" prop="company">
        <el-input v-model="form.company" autocomplete="off" placeholder="填写该工作人员所属公司"></el-input>
      </el-form-item>
      <el-form-item label="身份证信息" :label-width="formLabelWidth" prop="ID_No">
        <el-input v-model="form.ID_No" autocomplete="off" placeholder="填写该工作人员的身份证号码"></el-input>
      </el-form-item>
      <el-form-item label="分配该账号权限等级：" :label-width="formLabelWidth" prop="roles">
        <el-select v-model="form.roles|userstatus" placeholder="设置账号权限" class="select-width">
        <el-option label="管理员" value="admin"></el-option>
        <el-option label="客服" value="Customer"></el-option>
      </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="add_air">提交</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { userlist } from "@/api/table";
import { modifyitem } from "@/api/table";
import { formatDate } from "@/utils/formatdate";
import { add_user } from "@/api/table";
import { edit_user } from "@/api/table";
import { dele_user } from "@/api/table";
// 可使用规则检查账号密码是否符合
// import { isvalidUsername } from "@/utils/validate";
export default {
  data() {
    const validatename = (rule, value, callback) => {
      console.log(value);
      if (value.length == 0) {
        callback(new Error("登陆账号不能为空"));
      } else {
        callback();
      }
    };
    const validatepassword = (rule, value, callback) => {
      console.log(value);
      if (value.length == 0) {
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };
    const validatephone = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("手机号不能为空"));
      } else {
        callback();
      }
    };
    const validateID_No = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("身份证信息不能为空"));
      } else {
        callback();
      }
    };
    const validateroles = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error("账号权限不能为空"));
      } else {
        callback();
      }
    };
    return {
      seachdata: "",
      list: null,
      title: "",
      listLoading: false,
      order_list: [],
      dialogFormVisible: false,
      formLabelWidth: "180px",
      form: {
        name: "",
        password: "",
        nickname: "",
        phone: "",
        position: "",
        company: "",
        ID_No: "",
        roles: []
      },
      rules: {
        name: [
          {
            required: true,
            trigger: "blur",
            validator: validatename
          }
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatepassword
          }
        ],
        phone: [{ required: true, trigger: "blur", validator: validatephone }],
        ID_No: [
          {
            required: true,
            trigger: "blur",
            validator: validateID_No
          }
        ],
        roles: [
          {
            required: true,
            trigger: "blur",
            validator: validateroles
          }
        ]
      }
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    statusFilter(status) {
      const statusMap = {
        admin: "success",
        Customer: "gray"
      };
      return statusMap[status];
    },
    userstatus(status) {
      const statusMap = {
        admin: "管理员",
        Customer: "客服"
      };
      return statusMap[status];
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    seach() {
      let that = this;
      if (this.seachdata != "") {
        var data = this.order_list.filter(function(e) {
          if (e.name) return e.name.indexOf(that.seachdata) !== -1;
          else return false;
        });
        this.order_list = data;
      } else {
        this.fetchData();
      }
    },
    fetchData() {
      this.listLoading = true;
      userlist().then(response => {
        console.log(response);
        this.order_list = response.data;
        this.listLoading = false;
      });
    },
    edit_air(row) {
      console.log("修改");
      console.log(row);
      this.title = "修改用户信息";
      this.form = JSON.parse(JSON.stringify(row));;
      this.dialogFormVisible = true;
    },
    fail_order(row) {
      console.log("删除");
      this.$confirm("此操作将永久删除该员工, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let id = row._id
          dele_user(id).then(res => {
            this.fetchData();
            console.log(row);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add_air() {
      console.log(this.form);
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.title == "添加用户") {
            console.log(this.form);
            add_user(this.form).then(res => {
              console.log(res);
              this.dialogFormVisible = false;
              this.form = {
                name: "",
                nickname: "",
                phone: "",
                position: "",
                company: "",
                ID_No: "",
                roles: []
              };
              this.fetchData();
            });
          } else {
            console.log(this.form);
            edit_user(this.form).then(res => {
              console.log(res);
              this.dialogFormVisible = false;
              this.form = {
                name: "",
                nickname: "",
                phone: "",
                position: "",
                company: "",
                ID_No: "",
                roles: []
              };
              this.fetchData();
            });
          }
        } else {
        }
      });
    },
    add() {
      this.title = "添加用户";
      this.dialogFormVisible = true;
    },
    closeDialog() {
      this.form = {
        name: "",
        nickname: "",
        phone: "",
        position: "",
        company: "",
        ID_No: "",
        roles: []
      };
    }
  },
  watch: {}
};
</script>
<style scoped>
.addbutton {
  float: right;
  margin-bottom: 10px;
}
.seach {
  margin-bottom: 10px;
}
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.imgcon {
  width: 300px;
  height: 300px;
}
.el-input {
  width: 220px;
}
.select-width {
  width: 220px;
}
</style>
